<template>
    <div class="service">
        <el-card class="box-card">
            <ul>
                <li v-for="(item,index)  in  serviceData" :key="index">
                  <span>{{`${index+1}.${item.name}`}}</span>
                  <span>
                        <el-dropdown  @click="handleClick">
                            <el-button type="primary"  size="small">
                              编辑/删除<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item>编辑</el-dropdown-item>
                              <el-dropdown-item>删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                  </span>
                  <span>{{`${item.price}/${item.number}${item.danwei}`}}</span>
                </li>
                <li><span style="float:left"><el-button  @click="centerDialogVisible = true" type="text">新增任务+</el-button></span></li>
            </ul>
        </el-card>

      <!--新增的弹框-->
        <el-dialog
            title="新增任务"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <span>
                  <el-form :label-position="labelPosition" label-width="80px" :model="formData">
                        <el-form-item label="服务名称" prop="name" :rules="[{required:true,message:'请输入服务名称'}]"> 
                          <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="单位名称" prop=" danwei" :rules="[{required:true,message:'请输入单位名称'}]">
                          <el-input v-model="formData.danwei"></el-input>
                        </el-form-item>
                        <el-form-item label="数量"  prop=" number" :rules="[{required:true,message:'请输入数量'}]">
                           <el-input-number v-model="formData.number" controls-position="right" @change="handleChange" :min="1" :max="1000"></el-input-number>
                        </el-form-item>
                        <el-form-item label="价格"  prop=" price" :rules="[{required:true,message:'请输入价格'}]">
                           <el-input-number v-model="formData.price" controls-position="right" @change="handleChange1" :min="1" :max="1000"></el-input-number>
                        </el-form-item>
                  </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data(){
    return{
       centerDialogVisible: false,
       labelPosition: 'left',
       serviceData:[{
                    name:"公式相声",
                    price:'100',
                    number:'20',
                    danwei:'堆'
       },{
                    name:"疯狂英语",
                    price:'340',
                    number:'10',
                    danwei:'本'
       },{
                    name:"走起声",
                    price:'100',
                    number:'20',
                    danwei:'扎'
       }],
      formData: {
          name: '',
          danwei: '',
          number: '',
          price:''
        },
    }
  },
    methods:{
      handleChange(value) {
        console.log(value);
      },
       handleChange1(value) {
        console.log(value);
      },
    }
}
</script>
<style lang="scss" scoped>
   .service{
     width:95%;
     padding:20px 0px;
     margin:0  auto;
     & /deep/{
       .el-card__body {
           padding: 0  20px;
      }
     }
     ul li{
       list-style: none;
       height:80px;
       line-height: 80px;
       font-size: 16px;
       border-bottom: 1px solid  #e8e6e6;
        span:nth-last-child(2){
            position:fixed;
            right:15%;  
            &/deep/{
              .el-button--primary {
                    color:#5b5b5b;
                    background-color: #fff;
                    border:1px gray  solid;
                    border-radius: 20px;
                }
            }          
       }
       span:last-child{
         float:right;
        font-size: 16px;
        color: #409EFF;
       }
     }
   }
</style>
